<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
	  	<title>图片裁剪工具</title>
	  	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
		<%-- 有项目名的时候需要定义 --%>
	    <link rel="shortcut icon" type="image/x-icon" href="${ctxPath }/favicon.ico">
		<link rel="stylesheet" href="${ctxPath }/css/tool/jcrop/jquery.Jcrop.css" type="text/css" />
		<c:set var="pwidth" value="250"></c:set>
		<c:if test="${empty t_height }">
			<c:set var="t_height" value="400"></c:set>
			<c:set var="t_width" value="400"></c:set>
		</c:if>
		<c:set var="pheight" value="${pwidth * t_height / t_width }"></c:set>
		<style type="text/css">
		body {font-family: "Microsoft YaHei",微软雅黑,"宋体","Arial Narrow",HELVETICA;}
		.jcrop-holder #preview-pane {
		  display: block;
		  position: absolute;
		  z-index: 2000;
		  top: 10px;
		  right: -280px;
		  padding: 6px;
		  border: 1px rgba(0,0,0,.4) solid;
		  background-color: white;
		
		  -webkit-border-radius: 6px;
		  -moz-border-radius: 6px;
		  border-radius: 6px;
		
		  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		}
		/* The Javascript code will set the aspect ratio of the crop
		   area based on the size of the thumbnail preview,
		   specified here */
		#preview-pane .preview-container {
			width: ${pwidth}px;
			height: ${pheight}px;
			overflow: hidden;
		}
		.container {margin: 0 auto; width: 1000px;}
		.page-header {margin-bottom: 10px; text-align: center; color: #f10000;}
		.page-header h1 { font-size:18px;margin: 40px 0 0; padding: 0 0 10px; text-align:left; border-bottom:solid 1px #0186D5; color:#0186D5;}
		
		.btn-content {overflow:  hidden;zoom:1; background: #f1f1f1; padding: 20px; margin-bottom: 10px;  }
		.Upload-btn {float: left;}
		.Upload-btn .ke-inline-block { vertical-align: top;}
		.submitbtn,input.widheisetbtn { margin:0 10px; height: 27px;*line-height: 22px; border: 1px solid #F38231;background: #F3A517;border-radius: 3px;padding: 0 10px;color: #fff; outline:none;font-family: "Microsoft YaHei",微软雅黑,"宋体","Arial Narrow",HELVETICA; }
		.submitbtn:visited {outline: none;}
		#cutresult a{ color: #f10000; font-size: 14px;}
		#cutresult a:hover{ text-decoration: none;}
		.img-btn {float: right;}
		.img-btn span {color: #f10000; margin-right: 10px;}
		.img-btn .wshow,.img-btn .hshow {margin: 0;}
		input.imgUploadHandle {
			color: #fff; border-radius: 3px;
		    background: #0099E5;
		    border: solid 1px #0186D5;
		    background-position: right -25px;
		    padding: 0 12px;
		    margin: 0;
		    font-family: "微软雅黑";
		    font-size: 12px;
		    left: 2px;
		    text-decoration: none;
		    cursor: pointer;
		    height: 26px;
		    line-height: 17px;
		    overflow: visible;
		    display: inline-block;
		    vertical-align: top;
		    cursor: pointer;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="span12">
					<div class="jc-demo-box">
						<div class="page-header">
							<h1>图片裁剪工具</h1>
							<div style="text-align: left;margin: 5px 0;">注意：上传图片不能大于4M</div>
						</div>
						
						<div class="btn-content">
							<div>
								设置：宽度/高度 = 
								<input type="text" id="setwidth" name="setwidth" style="width: 50px" value="${t_width }" autocomplete="off"/>/<input type="text" id="setheight" name="setheight" style="width: 50px" value="${t_height }" autocomplete="off"/>
								<input type="button" class="widheisetbtn" value="确定">
							</div>
							<%-- 上传按钮--%>
							<div class="Upload-btn">
							<input class="imgUploadHandle" type="button" value="上传图片">
							<input type="button" value="裁剪" class="button submitbtn" style="display: none;">
							<span id="cutresult"></span>
							</div>
							<%-- 裁剪之后的图片大小--%>
							<div class="img-btn">
								<input type="hidden" id="x" name="x" />
								<input type="hidden" id="y" name="y" />
								<input type="hidden" id="x2" name="x2" />
								<input type="hidden" id="y2" name="y2" />
								选取区域
								宽度：<span><input type="hidden" id="w" name="w" readonly="readonly"/><span class="wshow"></span>px</span>
								高度：<span><input type="hidden" id="h" name="h" readonly="readonly"/><span class="hshow"></span>px</span>
								<input type="hidden" id="imgSource" name="imgSource">
							</div>
						</div>
						<%-- 图片显示区 --%>
						<img class="imgShow" src="http://admin.11315.cn/images/tool/example.jpg" id="target" alt="请先上传图片" />
						<div id="preview-pane">
							<div class="preview-container" title="此图片为预览图片">
							    <img src="http://admin.11315.cn/images/tool/example.jpg"  class="jcrop-preview" alt="图片预览" id="preview"/>
						    </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//uploadRootPath = "uploadCallback";
		uploadBaseUrl = "${applicationScope.uploadBaseUrl}"
		uploadUeRootPath = (uploadBaseUrl||"http://124.42.8.131:1134/upload")+"/ueditor/upload";
	    uploadImageHost = "${applicationScope.uploadImageHost}"||"http://test.11315.com/";
		host = window.location.host;
		uploadCallbackURL =  "http://"+host+"${ctxPath}/${applicationScope.uploadCallbackURL}";
		uploadGroup = "${applicationScope.uploadGroup}"||"sc"; //项目上传到的组，区分不同地区的项目
		ctxPath = "${ctxPath}";
	</script>
	<script src="${ctxPath }/js/lib/jquery-1.10.2.min.js"></script>
	<script src="${ctxPath }/js/tool/jcrop/jquery.Jcrop.js"></script>
	<script src="${ctxPath }/js/tool/jcrop/jquery.color.js"></script>
	<!--  上传 -->
	<script type="text/javascript" src="${ctxPath }/js/lib/ajaxupload/ajaxupload.js"/>"></script>
	<script src="${ctxPath }/js/tool/imgCut.js?2017032901"></script>
</html>
